<template>
  <div class="add">
    <div class="title">船期申报</div>
    <el-form ref="form"
             :model="form"
             label-width="120px"
             size="small"
             inline
             :rules="rules"
             :disabled="look=='look'">
      <el-form-item label="靠泊码头"
                    prop="termCode">
        <!-- <el-input v-model="form.termName"
                  placeholder="请输入靠泊码头"
                  clearable
                  disabled
                  style="width:220px"></el-input> -->
        <el-select v-model="form.termCode"
                   placeholder="请选择"
                   clearable
                   style="width:220px"
                   @change="changeTermCode">
          <el-option v-for="item in termCodeList"
                     :key="item.id"
                     :label="item.cnName"
                     :value="item.termCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船舶名称"
                    prop="vslId">
        <el-select v-model="form.vslId"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:220px"
                   @change="changeShip">
          <el-option v-for="item in vslIdList"
                     :key="item.cd"
                     :label="item.cnname"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="船舶类型"
                    prop="">
        <el-input placeholder=""
                  v-model="form.shipType"
                  disabled
                  style="width:220px"></el-input>
      </el-form-item> -->
      <el-form-item label="船舶类型"
                    prop="">
        <el-select v-model="form.vtpcode"
                   placeholder=""
                   clearable
                   disabled
                   @change="changeShip"
                   style="width:220px">
          <el-option v-for="item in vslNameList"
                     :key="item.value"
                     :label="item.name"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内外贸"
                    prop="intrade">
        <el-select v-model="form.intrade"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in intradeList"
                     :key="item.lowValue"
                     :label="item.meaning"
                     :value="item.lowValue"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item v-if="form.scdType=='CONTAINER'"
                    label="进口航次作业区"
                    prop="iopaAreaCode">
        <el-select v-model="form.iopaAreaCode"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in  paAreaCodeList"
                     :key="item.code"
                     :label="item.cnName"
                     :value="item.code"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- voySign：进出口标志，I:进口，E:出口，A:进出口 -->
      <el-form-item label="进出口标识"
                    
                    prop="voySign">
        <el-select v-model="form.voySign"
                   placeholder="请选择"
                   clearable
                   @change="scdType"
                   style="width:220px">
          <el-option v-for="item in  voySignList"
                     :key="item.value"
                     :label="item.name"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="进口航次"
                    prop="ivoyage">
        <el-input placeholder="请输入进口航次"
                  clearable
                  v-model="form.ivoyage"
                  style="width:220px" :disabled="iDis"></el-input>
      </el-form-item>
      <el-form-item label="出口航次"
                    prop="evoyage">
        <el-input placeholder="请输入出口航次"
                  clearable
                  v-model="form.evoyage"
                  style="width:220px" :disabled="eDis"></el-input>
      </el-form-item>
      <!-- <el-form-item v-if="form.scdType=='CONTAINER'"
                    label="出口航次作业区"
                    prop="eopaAreaCode">
        <el-select v-model="form.eopaAreaCode"
                   placeholder="请选择"
                   clearable
                   style="width:220px">
          <el-option v-for="item in  paAreaCodeList"
                     :key="item.code"
                     :label="item.cnName"
                     :value="item.code"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="计划抵港时间"
                    prop="eta">
        <el-date-picker type="datetime"
                        placeholder="选择日期"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.eta"
                        style="width:220px"></el-date-picker>
      </el-form-item>
      <el-form-item label="计划离港时间"
                    prop="etd">
        <el-date-picker type="datetime"
                        placeholder="选择日期"
                        clearable
                        value-format="yyyy-MM-dd HH:mm:ss"
                        v-model="form.etd"
                        style="width:220px"></el-date-picker>
      </el-form-item>
      <!-- 

          <el-option v-for="item in slnIdList"
                     :key="item.cd"
                     :label="item.name"
                     :value="item.id"></el-option>
       -->
      <el-form-item label="运营人航线"
                    prop="slnId">
        <el-select v-model="form.slnId"
                   placeholder="请选择"
                   clearable
                   @change="changeShip"
                   style="width:220px">
          <el-option v-for="item in slnIdList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船公司"
                    prop="cstShippingline">
        <el-input v-model="userInfoComputed"
                  placeholder="请输入船公司"
                  clearable
                  disabled
                  style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="船舶代理"
                    prop="cstAgency">
        <el-select v-model="form.cstAgency"
                   placeholder="请选择"
                   clearable
                   disabled
                   style="width:220px">
          <el-option label="区域一"
                     value="shanghai"></el-option>
          <el-option label="区域二"
                     value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.scdType=='CONTAINER'"
                    label="虚拟船期"
                    prop="">
        <el-checkbox v-model="form.virtualType"
                     true-label="V"
                     false-label="A"
                     style="width:220px"></el-checkbox>
      </el-form-item>
      <el-form-item label="备注"
                    prop="">
        <el-input type="textarea"
                  placeholder="请输入船期备注"
                  clearable
                  v-model="form.remark"
                  style="width:920px"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary"
                 size="small"
                 style="background-color:#043AA7"
                 @click.native="onSubmit"
                 v-if="look!='look'"
                 :loading="btnLoading">提交申请</el-button>
      <!-- <el-button type="info"
                 plain
                 size="small"
                 @click.native="cancel">取消</el-button> -->
    </div>
    <newLeftMenu2 ref="newLeftMenu2" v-show="false"></newLeftMenu2>
  </div>
</template>

<script>
import newLeftMenu2 from '@/components/newLeftMenu2.vue'
export default {
  name: 'addPlan',
  components: {newLeftMenu2},
  data() {
    return {
      voySignList:[
        { name: '进口', value: 'I' },
        { name: '出口', value: 'E' },
        { name: '进出口', value: 'A' },
      ],
      iDis:false,
      eDis:false,
      intradeList: [],
      slnIdList: [],
      vslIdList: [],
      vslNameList: [
        { name: '驳船', value: 'BAR' },
        { name: '全集装箱船', value: 'FCS' },
        { name: '散杂货', value: 'GCR' },
        { name: '滚装船', value: 'ROR' },
      ],
      paAreaCodeList: [],
      termCodeList: [],
      form: {
        scdType: '',
        iopaAreaCode: '',
        eopaAreaCode: '',
        vslId: '',
      },
      rules: {
        termCode: [
          { required: true, message: '请选择靠泊码头', trigger: 'change' },
        ],
        vslId: [
          { required: true, message: '请选择船舶名称', trigger: 'change' },
        ],
        intrade: [
          { required: true, message: '请选择内外贸', trigger: 'change' },
        ],
        eta: [
          { required: true, message: '请选择计划抵港时间', trigger: 'change' },
        ],
        etd: [
          { required: true, message: '请选择计划离港时间', trigger: 'change' },
        ],
        slnId: [
          { required: true, message: '请选择运营人航线', trigger: 'change' },
        ],
        voySign: [
          { required: true, message: '请选择进出口标识', trigger: 'change' },
        ],
        // ivoyage: [
        //   { required: true, message: '请输入进口航次', trigger: 'blur' },
        // ],
        iopaAreaCode: [
          {
            required: true,
            message: '请选择进口航次作业区',
            trigger: 'change',
          },
        ],
        // evoyage: [
        //   { required: true, message: '请输入出口航次', trigger: 'blur' },
        // ],
        eopaAreaCode: [
          {
            required: true,
            message: '请选择出口航次作业区',
            trigger: 'change',
          },
        ],
      },
      notCheck:false,
      userInfo: null,
      id: null,
      btnLoading: false,
      look: '',
      oldFormJson:'',
    }
  },
//通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
      // console.log('About--beforeRouteLeave',to,from)
      let nowJsonData = JSON.stringify(this.form)
      // console.log('================================ ',nowJsonData,' 000000000000000000000000 ',this.oldFormJson) //;
      if(this.notCheck || this.look == 'look'){
        next()
      }else if(nowJsonData!=this.oldFormJson){
        this.$nextTick(()=>{
          this.$confirm('存在未提交信息，确认关闭？',{
            closeOnHashChange:false,
            closeOnClickModal:false,
            distinguishCancelAndClose:true,
            closeOnPressEscape:false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
                .then(_ => {
                  console.log('这边有问题',this.$route.path);
                  // console.log('这边有问题',this.$route.current);
                  this.$store.commit('setActiveMenuPath',next.fullPath)
                  // this.$router.push(to.fullPath)
                  next()
                })
                .catch(_ => {
                  console.log('是取消！！！！！！！！！！！！！！！！！',from.fullPath);
                  this.$store.commit('setActiveMenuPath',from.fullPath)
                  // this.$route.path = from.fullPath
                  // this.$router.push(from.fullPath)
                  // console.log('看看路由',this.$route.path)
                  this.$nextTick(()=>{
                    // this.$refs.newLeftMenu2.refresh = !this.$refs.newLeftMenu2.refresh
                    let path = {
                      index: from.fullPath,
                    }
                    // this.$refs.newLeftMenu2.getActivePath(path) 
                    this.$refs.newLeftMenu2.getPath(from.fullPath)
                    this.$refs.newLeftMenu2.linkTab(from.fullPath)
                  })
                  // this.$refs.newLeftMenu2.linkTab(from.fullPath)
                  // console.log('path: ' + from.fullPath,this.$route.path);
                });
        })
      }else{
        next()
      }
  },
  methods: {
    scdType(){
      if('I' === this.form.voySign){
        this.form.evoyage=''
        this.eDis=true
        this.iDis=false
      }
      if('E' === this.form.voySign){
        this.form.ivoyage=''
        this.eDis=false
        this.iDis=true
      }
      if('A' === this.form.voySign){
        this.eDis=false
        this.iDis=false
      }
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          /* 取消必填限制 */
          // if (this.$route.name == 'addContainer' && (!this.form.ivoyage && !this.form.evoyage)) {
          //   this.$message.error('进口航次和出口航次至少填写一项')
          //   return
          // }
          this.form.id ? await this.editSchedules() : await this.addSchedules()
        }
      })
    },
    changeShip(v) {
      this.vslIdList.map((item) => {
        if (item.id == v) {
          this.form.vtpcode = item.vtpcode
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
    },
    changeTermCode(v) {
      this.form.vslId = ''
      this.vessles()
      this.form.iopaAreaCode = ''
      this.form.eopaAreaCode = ''
      this.opaAreaCode()
    },
    //船舶名称
    vessles() {
      this.$api
        .vessles({
          cstShippingline: JSON.parse(localStorage.getItem('userInfo'))
            .customerCode, //JSON.parse(localStorage.getItem('userInfo')).customerCode
          termCode: this.form.termCode,
        })
        .then((res) => {
          this.vslIdList = res.data.data
        })
        .catch((err) => {})
    },
    //内外贸
    refCode() {
      this.$api
        .refCode({ domain: 'INTRADE_TYPE' })
        .then((res) => {
          this.intradeList = res.data.data
        })
        .catch((err) => {})
    },
    //进出口作业区
    opaAreaCode() {
      this.$api.opaAreaCode({ termCode: this.form.termCode }).then((res) => {
        this.paAreaCodeList = res.data.data
      })
    },
    //运营人航线
    serviceLines() {
      this.$api.QueryDataStandard({
        module:'ship_routes',
        page:{
          orderItems:['chnnm'],
          current:0,
          size:999
        }
      }).then((res) => {
          this.slnIdList = res.data.data
      }).catch((err) => {})
      // this.$api
      //   .serviceLines()
      //   .then((res) => {
      //     this.slnIdList = res.data.data
      //   })
      //   .catch((err) => {})
    },
    addSchedules() {
      this.btnLoading = true
      this.form.fixscdshpfg = '1'
      this.form.cstShippingline = this.userInfo.customerCode
      this.$api
        .addSchedules(this.form)
        .then((res) => {
          this.$message.success('提交成功')
          this.btnLoading = false
          this.notCheck = true
          this.$router.push({
            query: {
              name: 'shipPlanList',
              title:'您的船期申请已提交'
            },
            name: 'success',
          })
          // return
          // this.$refs.form.resetFields()
        })
        .catch((err) => {
          this.btnLoading = false
        })
    },
    editSchedules() {
      this.btnLoading = true
      this.$api
        .editSchedules(this.form)
        .then((res) => {
          this.$message.success('编辑成功')
          this.btnLoading = false
          this.notCheck = true
          this.$router.back()
        })
        .catch((err) => {
          this.btnLoading = false
        })
    },
    //根据id查询明细
    findOne() {
      this.$api.findOne({ id: this.id }).then((res) => {
        this.form = res.data
        this.$set(this.form, 'shipType', this.form.vtpcodeName)
        this.vessles()
        this.opaAreaCode()
      })
    },
    //码头
    getSchedulesTerm() {
      this.$api.getSchedulesTerm().then((res) => {
        this.termCodeList = res.data.data
      })
    },
  },

  computed: {
    userInfoComputed() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return this.userInfo.customerCode + '/' + this.userInfo.customerName
    },
  },
  watch: {},

  mounted() {
    //console.log(this.$route.name)
    this.form.scdType = this.$route.name == 'addBulk' ? 'BULK_CARGO' : 'CONTAINER'
    if('BULK_CARGO' === this.form.scdType){
      this.iDis=true
      this.eDis=true
    }
    this.id = this.$route.query.id
    this.look = this.$route.query.type
    console.log(this.look)
    console.log(this.form)
    if (this.id) {
      this.findOne()
    }
    this.refCode()
    this.serviceLines()
    this.getSchedulesTerm()
    this.$nextTick(()=>{
      this.oldFormJson = JSON.stringify(this.form)
      this.notCheck = false
    })
  },
  // deactivated(){
  //   let nowJsonData = JSON.stringify(this.form)
  //   if(nowJsonData!=this.oldFormJson){
  //     this.$confirm('存在未提交信息，确认关闭？')
  //           .then(_ => {
              
  //           })
  //           .catch(_ => {

  //           });
  //   }
  // },
}
</script>
<style lang='less' scoped>
/deep/ .el-input.is-disabled .el-input__inner {
  color: #666

}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #666
}
.add {
  //text-align: center;
  background-color: #fff;
  padding: 60px 40px;
  position: relative;
  .btn {
    text-align: center;
    .el-button {
      width: 100px;
    }
  }
  .title {
    position: absolute;
    background: #0f47b8;
    height: 40px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    padding-left: 20px;
    top: 0;
    left: 0;
    right: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}
</style>